<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统人员</title>
    <script th:src="@{/layui/layui.js}" type="text/javascript"></script>
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet" />
</head>
<body>

<div class="layui-container" style="margin: 10px 0px; ">
    <form class="layui-form layui-form-pane">
        <input type="hidden" name="id" value="${n.id}">
        <div class="layui-form-item">
            <label class="layui-form-label">公告标题</label>
            <div class="layui-input-block">
                <input type="text" name="title" value="" lay-verify="required|title" class="layui-input" placeholder="通知的标题，中文-必填" autocomplete="off">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">截止时间</label>
                <div class="layui-input-inline" style="width: 250px;">
                    <input type="text" id="validDate" lay-verify="required"
                           name="validDate" class="layui-input" value=""
                    placeholder="选择截止时间-必填" autocomplete="off">
                </div>
            </div>

        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">接收门户</label>
            <div class="layui-input-block">
                <input type="radio" lay-filter="mh" name="mh" title="所有门户" value="0" checked />
                <input type="radio" lay-filter="mh" name="mh" title="指定门户" value="1"/>
            </div>
        </div>
            <div class="layui-form-item" id="selectDiv" style="display: none;">

        <div class="layui-input-block">
            <div>
                <input type="hidden" name="acceptRole" id="acceptRole" value="all" />
                <input type="checkbox" name="acceptRoles[]" value="1" title="1111"/>
            </div>
        </div>
</div>
<div class="layui-form-item layui-form-text">
    <label class="layui-form-label">公告内容</label>
    <div class="layui-input-block">
        <textarea class="layui-textarea" id="content" name="content"></textarea>
    </div>
</div>
<hr class="layui-bg-red" style="border:2px"/>
<div class="layui-form-item layui-form-text">
    <div class="layui-input-block">
        <div class="layui-upload">
            <a class="layui-btn" id="checkFile">选择文件</a>
            <a class="layui-btn layui-btn-primary" id="submitFile">开始上传</a>
            <div class="layui-upload-list" style="max-width: 800px">
                <table class="layui-table">
                    <colgroup>
                        <col>
                        <col width="100">
                        <col width="200">
                        <col width="120">
                    </colgroup>
                    <thead>
                    <tr>
                        <th>文件名</th>
                        <th>大小</th>
                        <th>上传进度</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="fileList">

                    </tbody>
                </table>
            </div>

        </div>
    </div>
</div>
<div class="layui-form-item" style="display: none;">
    <div class="layui-input-block">
        <a class="layui-btn" lay-submit="" lay-filter="submitBtn" id="submitBtn">提交</a>
        <a class="layui-btn" lay-submit="" lay-filter="contributionBtn" id="contributionBtn">草稿</a>
        <a class="layui-btn" data-method="cancelBtn" id="cancelBtn">取消</a>
    </div>
</div>
</form>
</div>
<script>
    var $,fileNames=[],fileIds = [],active;
    layui.use(['form','laydate','layedit','jquery','layer','upload','element'],function(){
        var form = layui.form,
            laydate = layui.laydate,
            layedit = layui.layedit,
            layer = layui.layer,
            upload = layui.upload,
            element = layui.element;
        $ = layui.jquery;
        /*var formSelects = layui.formSelects;*/

        form.on('radio(mh)',function(data){
            var value = data.value;
            if(value == 0){
                $('#selectDiv').hide();
                $('#acceptRole').val('all');
            }else{
                $('#selectDiv').show();
                $('#acceptRole').val("");
            }
        })

        //获取当前系统时间
        var date = new Date();
        var nowDate = (date.getFullYear())+"-"
            +(date.getMonth()+1)+"-"+(date.getDate());

        //时间初始化
        laydate.render({
            elem:'#validDate',
            min:nowDate
        })

        //初始化富文本
        var index = layedit.build('content',{
            tool:['underline','strong','left','right','center','face'],
            height:320,
            //uploadImage:{url:'',type:'post'}
        })
        active = {
            insertOrUpdate:function(status,data){
                //获取编辑器的内容
                var content = layedit.getContent(index);
                var dataForm = data.field;
                //把内容存入属性
                dataForm.content = content;
                dataForm.status = status;
                //执行保存，先去获取fileList里面的所有的tr，从tr中获取id
                fileIds = [];
                $('#fileList tr').each(function (i,tr) {
                    var id = $(tr).attr('class');
                    fileIds.push(id);
                })
                dataForm.fileIds = JSON.stringify(fileIds);
                if(dataForm.acceptRole == 'all'){
                    dataForm.acceptRoles = null;
                }
                $.ajax({
                    type:'post',
                    url:'/system/nc/add',
                    data:dataForm,
                    dataType:'json',
                    success:function(result){
                        top.layer.msg(result.msg);
                        let index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);//关闭父页面窗口
                    }
                })
            },
            fileDelete:function(fileNames,fileIds,flat){
                $.ajax({
                    type:'post',
                    url:'/system/fc/fileDelete',
                    data:{
                        fns:fileNames,
                        fis:fileIds
                    },
                    dataType:'json',
                    success:function (result) {
                        layer.msg(result.msg);
                        if(flat) {
                            let index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);//关闭父页面窗口
                        }else{
                            var id = fileIds[0];
                            $('#upload-'+id).remove();
                        }

                    }
                });
            }
        }

        form.on('submit(submitBtn)',function(data){
            active.insertOrUpdate(1,data);
        })
        form.on('submit(contributionBtn)',function(data){
            active.insertOrUpdate(0,data);
        })
        $('#cancelBtn').on('click',function (data) {
            if(fileNames.length>0){
                active.fileDelete(fileNames,fileIds,true);
            }else{
                let index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);//关闭父页面窗口
            }
        })

        //文件上传
        var uploadList = upload.render({
            elem: '#checkFile',
            elemList:$('#fileList'),//列元素列表
            url:'/file/fc/fileUpload',
            accept:'file',//表示允许所有文件
            multiple:true,//多选
            number:3,
            auto:false,//是否自动上传
            bindAction:'#submitFile',
            choose:function (obj) {
                var that = this;
                //获取你选择文件的列表
                var files = this.file = obj.pushFile();
                //读取文件
                obj.preview(function (i,f,r) {
                    var tr = $(['<tr id="upload'+i+'">'+
                    '<td>'+f.name+'</td>'+
                    '<td>'+(f.size/1024).toFixed(1)+'kb</td>'+
                    '<td>'+
                    '<div class="layui-progress" lay-filter="progress'+i+'">'+
                    '<div class="layui-progress-bar" lay-percent=""></div>'+
                    '</div>'+
                    '</td>'+
                    '<td>'+
                    '<a class="layui-btn layui-btn-xs layui-hide file-reupload">重传</a>'+
                    '<a class="layui-btn layui-btn-xs layui-btn-danger file-delete">删除</a>'+
                    '</td>'+
                    '</tr>'].join(''));
                    //删除
                    tr.find('.file-delete').on('click',function () {
                        delete files[i];
                        tr.remove();
                        uploadList.config.elem.next()[0].value = '';//清空file的值，防止上传空文件
                    })
                    //重传
                    tr.find('.file-reupload').on('click',function (){
                        obj.upload(i,f);
                    })
                    //添加到列表
                    that.elemList.append(tr);
                    //渲染新的进度条组件
                    element.render('progress')
                })
            },
            done:function (res,index,upload) {//文件上传成功回调方法

                if(res.code == 0) {
                    fileNames.push(res.data.newFileName);
                    var id = res.data.id;
                    fileIds.push(id);
                    var that = this;
                    var tr = that.elemList.find('tr#upload' + index), tds = tr.children();
                    tr.attr('class',id);
                    //把第四个td,即下标为3的td里面的按钮隐藏
                    tds.eq(3).html("<span style='color: green'>"+res.msg+"</span>");
                    delete that.files[index];
                }else{
                    this.error(index,upload);
                }
                return;
            },
            error:function(index,upload){
                var that = this;
                var tr = that.elemList.find('tr#upload' + index), tds = tr.children();
                tds.eq(3).find('.file-reupload').removeClass('layui-hide');//去掉隐藏的样式
            },
            progress:function (n,elem,e,index) {//文件上传进度条
                element.progress('progress'+index,n+'%');//n为进度百分比
            }
        });

    });

    function btnSubmit(){
        $('#submitBtn').click();
    }
    function btnContribution(){
        $('#contributionBtn').click();
    }
    function btnCancel() {
        $('#cancelBtn').click();
    }

    function fileDelete(id,filename) {
        var ids = [],names = [];
        ids.push(id);names.push(filename);
        active.fileDelete(names,ids,false);
    }

</script>
</body>
</html>